import React, { useState } from 'react'
import { Row, Col, Input, Select, Button } from 'antd'
import { ListRawState } from '../../types'
import { addList } from '../../api'
const Index: React.FC = () => {
	const [editData, setEditData] = useState<ListRawState>({
		id: new Date().getTime().toString(),
		tel: 0,
		address: "",
		name: "",
		image: "",
		type: '已下单'
	  })
	  const handleAdd = async () => {
		const resp = await addList(editData);
	  }
	return (
		<div>
			 <div>
        <Row className="my-row">
          <Col span={2}>ID:</Col>
          <Col span={21}>
            <Input value={editData.id} onChange={e => {
              setEditData({
                ...editData,
                id: e.target.value
              })
            }} disabled></Input>
          </Col>
        </Row>
        <Row className="my-row">
          <Col span={2}>姓名:</Col>
          <Col span={21}>
            <Input value={editData.name} onChange={e => {
              setEditData({
                ...editData,
                name: e.target.value
              })
            }}></Input>
          </Col>
        </Row>
        <Row className="my-row">
          <Col span={2}>电话:</Col>
          <Col span={21}>
            <Input value={editData.tel} onChange={e => {
              setEditData({
                ...editData,
                tel: +e.target.value
              })
            }}></Input>
          </Col>
        </Row>
        <Row className="my-row">
          <Col span={2}>地址:</Col>
          <Col span={21}>
            <Input value={editData.address} onChange={e => {
              setEditData({
                ...editData,
                address: e.target.value
              })
            }}></Input>
          </Col>
        </Row>
        <Row className="my-row">
          <Col span={2}>状态:</Col>
          <Col span={21}>
            <Select style={{ width: '100%' }} value={editData.type} onChange={(value) => {
              setEditData({
                ...editData,
                type: value
              })
            }}>
              {
                 ["已下单", "已付款", "未发货", "已发货", "待收货", "已收货"].map((v, i) => {
                  return  <Select.Option value={v}>{v}</Select.Option>
                 })
              }
            </Select>
          </Col>
        </Row>
        <Row className="my-row">
          <Col span={2}>图片:</Col>
          <Col span={21}>
            <Input value={editData.image} onChange={e => {
              setEditData({
                ...editData,
                image: e.target.value
              })
            }}></Input>
          </Col>
        </Row>
		<Row className="my-row">
          <Col span={2}></Col>
          <Col span={21}>
			<Button type="primary" block onClick={() => handleAdd()}>添加数据</Button>
          </Col>
        </Row>
        </div>
		</div>
	)
}

export default Index